<template>
  <div class="HelloWorld">
    <el-container style="">
      <el-aside width="250px">
        <el-menu class="sidebar">
          <div class="sidebarLOGO"><img src="@/assets/img/logo.png" alt=""></div>
          <div class="sidebartab">
            <ul>
              <li 
              v-for="(item,index) in tabTitle" 
              :key="index" 
              @click="clickTab(item,index)"
              class="sidebartabli" 
              :class="{'tablihover':item.status===true}">
              <i class="tabi el-icon-s-home"></i>{{item.title}}
              </li>
            </ul>
          </div>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header style="text-align: right; font-size: 12px;background-color:#000;">
          <a class="mgl">返回首页</a>
          <a class="mgl">通知消息</a>
          <a class="mgl">意见反馈</a>
          <el-dropdown>
            <span @mouseenter="huoqvphone" @mouseout="iconList.blagphone = false" class="mgl">
               <span>昵称：杨先生</span>
               <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>离开退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <span>王小虎</span> -->
        </el-header>
        
        <el-main class="centre">
          <train></train>
          <!-- <resume v-if="index === 1"></resume> -->
           <!-- 底部 -->
  <div class="footer">
    <div class="line"></div>
    <div class="w1280">
      <div class="youshi">
        <ul>
          <li><i class="el-icon-video-camera"></i>学习资料</li>
          <li><i class="el-icon-document"></i>精品内容</li>
          <li><i class="el-icon-document-copy"></i>前端面试题</li>
          <li><i class="el-icon-view"></i>代码特效</li>
          <li><i class="el-icon-help"></i>项目源码</li>
        </ul>
      </div>
      <div class="middle">
        <div class="middle">
          <ul>
            <li>
              <h4>关于我们</h4>
              <p>本站只供交流学习</p>
              <p>本站后续有待完善</p>
              <p>本站技术有带提升</p>
            </li>
            <li>
              <h4>关于我们</h4>
              <p>本站只供交流学习</p>
              <p>本站后续有待完善</p>
              <p>本站技术有带提升</p>
            </li>
            <li>
              <h4>关于我们</h4>
              <p>本站只供交流学习</p>
              <p>本站后续有待完善</p>
              <p>本站技术有带提升</p>
            </li>
            <!-- <li>
              <h4>学习资料群</h4>
              <p><img src="@/assets/img/logo.png" alt="" class="imgs"></p>
            </li>
            <li>
              <h4>本站源码</h4>
              <p>QQ:1807709729</p>
              <p>网站完整版地址</p>
              <p><a href="#">点我跳到完整网站</a></p>
            </li> -->
          </ul>
        </div>
      </div>
    </div>
    <div class="copyright"><span>苏京B2-xxxxxxx 京公海网安备1101080xxxxxxx号 京ICP备xxxxxxxx号-32</span></div>
  </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
  .el-header {
    background-color: #B3C0D1;
    line-height: 60px;
  }
</style>

<script>
var c = document.createElement( 'canvas' ),
    ctx = c.getContext( '2d' ),
    w = c.width = 250,
    h = c.height = 890,
    particles = [],
    particleCount = 1000,
    particlePath = 4,
    pillars = [],
    pillarCount = 110,
    hue = 0,
    hueRange = 60,
    hueChange = 1,
    gravity = 0.1,
    lineWidth = 1,
    lineCap = 'round',
    PI = Math.PI,
    TWO_PI = PI * 2;
function rand( min, max ) {
	return Math.random() * ( max - min ) + min;
}

function distance( a, b ) {
  var dx = a.x - b.x,
      dy = a.y - b.y;
  return Math.sqrt( dx * dx + dy * dy );
}
function Particle( opt ) {
  this.path = [];
  this.reset();
}

Particle.prototype.reset = function() {
  this.radius = 1;
  this.x = rand( 0, w );
  this.y = 0;
  this.vx = 0;
  this.vy = 0;
  this.hit = 0;
  this.path.length = 0;
};

Particle.prototype.step = function() {
  this.hit = 0;
  
  this.path.unshift( [ this.x, this.y ] );
  if( this.path.length > particlePath ) {
    this.path.pop();
  }
 
  this.vy += gravity;
      
  this.x += this.vx;
  this.y += this.vy;
  
  if( this.y > h + 10 ) {
    this.reset();
  }
  
  var i = pillarCount;
  while( i-- ) {
    var pillar = pillars[ i ];
    if( distance( this, pillar ) < this.radius + pillar.renderRadius ) {
      this.vx = 0;
      this.vy = 0;
      this.vx += -( pillar.x - this.x ) * rand( 0.01, 0.03 );
      this.vy += -( pillar.y - this.y ) * rand( 0.01, 0.03 );
      pillar.radius -= 0.1;
      this.hit = 1;
    }
  }
};

Particle.prototype.draw = function() {
  ctx.beginPath();
  ctx.moveTo( this.x, ~~this.y );
  for( var i = 0, length = this.path.length; i < length; i++ ) {
    var point = this.path[ i ];
    ctx.lineTo( point[ 0 ], ~~point[ 1 ] );
  }
  ctx.strokeStyle = 'hsla(' + rand( hue + ( this.x / 3 ), hue + ( this.x / 3 ) + hueRange ) + ', 50%, 30%, 0.3)';
  ctx.stroke();
  
  if( this.hit ) {
    ctx.beginPath();
    ctx.arc( this.x, this.y , rand( 1, 25 ), 0, TWO_PI );
    ctx.fillStyle = 'hsla(' + rand( hue + ( this.x / 3 ), hue + ( this.x / 3 ) + hueRange ) + ', 80%, 15%, 0.1)'
    ctx.fill();
  }
};
function Pillar() {
  this.reset();
}

Pillar.prototype.reset = function(){
  this.radius = rand( 50, 100 );
  this.renderRadius = 0;
  this.x = rand( 0, w );
  this.y = rand( h / 2 - h / 4, h );
  this.active = 0;
};

Pillar.prototype.step = function() {
  if( this.active ) {
    if( this.radius <= 1 ) {
      this.reset();
    } else {
      this.renderRadius = this.radius;
    }
  } else {
    if( this.renderRadius < this.radius ) {
      this.renderRadius += 0.5;
    } else {
      this.active = 1;
    }
  }
};

Pillar.prototype.draw = function() {
  ctx.beginPath();
  ctx.arc( this.x, this.y, this.renderRadius, 0, TWO_PI, false );
  ctx.fill();
};
function init() {
  ctx.lineWidth = lineWidth;
  ctx.lineCap = lineCap;
  
  var i = pillarCount;
  while( i-- ){
    pillars.push( new Pillar() );
  }
  
  document.body.appendChild( c );
  loop();
}
function step() {
  hue += hueChange;
  
  if( particles.length < particleCount ) {
    particles.push( new Particle() );
  }
  
  var i = particles.length;
  while( i-- ) {
    particles[ i ].step();
  }
  
  i = pillarCount;
  while( i-- ) {
    pillars[ i ].step();
  }
}
function draw() {
  ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
  ctx.fillRect( 0, 0, w, h );
 
  ctx.globalCompositeOperation = 'lighter';
  var i = particles.length;
  while( i-- ) {
    particles[ i ].draw();
  }
  
  ctx.globalCompositeOperation = 'source-over';
  i = pillarCount;
  ctx.fillStyle = 'rgba(20, 20, 20, 0.3)';
  while( i-- ) {
    pillars[ i ].draw();
  }
}
function loop() {
  requestAnimationFrame( loop );
  step();
  draw();
}
init();
import './HelloWorld.css'
import train from '@/components/train/train.vue'
import resume from '@/components/resume/resume.vue'
  export default {
    // name: 'train',
    components: {
      train,
      resume
    },
    data() {
      return{
         tabTitle:[
          {title:'首屏首页', index:1, status: true},
          {title:'本人简历', index:2, status: false},
          {title:'学习视频', index:3, status: false},
          {title:'学习手册', index:4, status: false},
          {title:'面试题目', index:5, status: false},
          {title:'特效代码', index:6, status: false},
          {title:'案例项目', index:7, status: false},
          {title:'下载中心', index:8, status: false}
        ],
        iconList: {
          blagphone: false
        },
        index:0
      }
    },
    methods:{
        clickTab (items, index) {
        this.tabTitle.forEach(item => {
          item.status = false
        })
        items.status = !items.status
        this.lastindex = index
        this.index = index
      },
      huoqvphone () {
        this.iconList.blagphone = true
      }
    }
  };
</script>